<template>
	<div class="account-management-container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="黑名单账号管理" name="blacklistAccountManagement">
				<SearchAccount @searchData="searchDataAccount" class="search-account" />
				<el-button type="primary" class="add-btn" @click="insertBlack">添加黑名单</el-button>
				<Table :tableData="tableData">
					<template v-slot:btn>
						<el-table-column width="250px" align="center" label="操作">
							<template slot-scope="scope">
								<el-button size="mini" class="edit-btn" @click="editAccount(scope.row)">修改</el-button>
								<el-button size="mini" class="delete-btn" @click="deleteAccount(scope.row)" type="danger">删除</el-button>
							</template>
						</el-table-column>
					</template>
				</Table>
				<PageSize :pages="searchData" @changePageSize="changeAccountPageSize" @changeCurrentPage="changeAccountCurrentPage" class="page" />
			</el-tab-pane>
		</el-tabs>
		<!-- 添加黑名单组件 -->
		<AddBlacklist
			v-if="showAddBlacklistDialog"
			:dialogVisible="showAddBlacklistDialog"
			:title="title"
			:userList="tableData.tableConent"
			@closeBlacklist="closeAddBlacklist"
			@sureBlacklist="sureAddBlacklist"
		/>
		<!-- 修改黑名单组件 -->
		<AddBlacklist
			v-if="showEditBlacklistDialog"
			:dialogVisible="showEditBlacklistDialog"
			:title="title"
			:userList="tableData.tableConent"
			:editBlackData="editBlackData"
			@closeBlacklist="closeEditBlacklist"
			@sureBlacklist="sureEditBlacklist"
		/>
	</div>
</template>

<script>
import SearchAccount from './SearchAccount.vue';
import Table from '@/views/components/Table.vue';
import PageSize from '@/views/components/PageSize.vue';
import AddBlacklist from './AddBlacklist.vue';
import { getBanUserList, addBanUser, updateBanUser, delBanUser } from '@/api/api';
export default {
	name: '',
	components: { SearchAccount, Table, PageSize, AddBlacklist },
	props: {},
	data() {
		return {
			activeName: 'blacklistAccountManagement',
			tableData: {
				sort: false,
				tableHead: [
					{
						label: '用户ID',
						prop: 'userId'
					},
					{
						label: '添加时间',
						prop: 'createdAt'
					},
					{
						label: '黑名单分组',
						prop: 'groupName'
					}
				],
				tableConent: [],
				showIndex: false,
				showCheck: false
			},
			// 条件搜索
			searchData: {
				createdAtStart: '',
				createdAtEnd: '',
				userId: '',
				title: '',
				page: 1,
				pageSize: 10,
				total: 0
			},
			showAddBlacklistDialog: false, //是否显示添加黑名单弹框
			showEditBlacklistDialog: false, //是否显示修改黑名单弹框
			// 修改黑名单数据
			editBlackData: {
				userId: '',
				groupName: '',
				banGroupId: ''
			},
			editUserId: 0
		};
	},
	mounted() {
		this.initBlacklistAccountManagement();
	},
	methods: {
		/**
		 * 检索
		 * @param {*} form
		 */
		searchDataAccount(form) {
			console.log('searchDataAccount', form);
			this.searchData.createdAtStart = form.createdAtStart;
			this.searchData.createdAtEnd = form.createdAtEnd;
			this.searchData.userId = encodeURIComponent(form.userId);
			this.searchData.title = encodeURIComponent(form.title);
			this.searchData.page = 1;
			this.searchData.pageSize = 10;
			this.initBlacklistAccountManagement();
		},
		// 添加黑名单 相关方法
		insertBlack() {
			this.title = '添加黑名单';
			this.showAddBlacklistDialog = true;
		},
		closeAddBlacklist() {
			this.showAddBlacklistDialog = false;
		},
		/**
		 *点击确定按钮提交添加黑名单
		 * @param {*} form
		 */
		async sureAddBlacklist(form) {
			try {
				let params = {
					userId: form.userId,
					banGroupId: form.groupName
				};
				const { data } = await addBanUser(params);
				console.log(data);
				this.initBlacklistAccountManagement();
				this.showAddBlacklistDialog = false;
				this.$message.success('黑名单添加成功');
			} catch (error) {
				console.log(error);
			}
		},
		// 修改
		editAccount(row) {
			console.log('editAccount', row);
			this.editBlackData.userId = row.userId;
			this.editBlackData.groupName = row.groupName;
			this.editBlackData.banGroupId = row.banGroupId;
			this.editUserId = row.id;
			this.title = '修改黑名单信息';
			this.showEditBlacklistDialog = true;
		},
		closeEditBlacklist() {
			this.showEditBlacklistDialog = false;
		},
		/**
		 *点击确定按钮提交修改黑名单
		 * @param {*} form
		 * @param {*} oldForm
		 */
		async sureEditBlacklist(form, oldForm) {
			console.log(oldForm, 'sureEditBlacklist', form);
			try {
				let params = {};
				// 修改的时候过滤参数
				if (form.userId !== oldForm.userId) {
					params.userId = form.userId;
				}
				if (form.groupName !== oldForm.groupName) {
					params.banGroupId = form.groupName;
				}
				const { data } = await updateBanUser(this.editUserId, params);
				console.log(data);
				this.initBlacklistAccountManagement();
				this.showEditBlacklistDialog = false;
				this.$message.success('黑名单修改成功');
			} catch (error) {
				console.log(error);
			}
		},
		// 删除
		deleteAccount(row) {
			console.log('deleteAccount', row);
			this.$confirm(`确定要删除黑名单用户<${row.userId}>吗? 是否继续?`, '提示', {
				confirmButtonText: '确认删除',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					delBanUser(row.id)
						.then(res => {
							console.log(res.data);
							this.$message.success('删除成功！');
							this.initBlacklistAccountManagement();
						})
						.catch(error => {
							console.log(error);
						});
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 分页
		changeAccountPageSize(val) {
			this.searchData.pageSize = val;
			this.searchData.page = 1;
			this.initBlacklistAccountManagement();
		},
		changeAccountCurrentPage(val) {
			this.searchData.page = val;
			this.initBlacklistAccountManagement();
		},
		// 初始化黑名单账号列表
		async initBlacklistAccountManagement() {
			try {
				const { data } = await getBanUserList(this.searchData);
				console.log(data, '初始化黑名单账号列表');
				this.tableData.tableConent = this.getInterfaceData(data.rows);
				this.searchData.total = data.count;
			} catch (error) {
				console.log(error);
			}
		},
		// 处理接口返回的数据
		getInterfaceData(array) {
			return array.map(item => {
				return {
					createdAt: this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
					groupName: item.ban_group.title,
					userId: item.userId,
					id: item.id,
					updatedAt: this.$moment(item.updatedAt).format('YYYY-MM-DD HH:mm:ss'),
					banGroupId: item.banGroupId
				};
			});
		}
	}
};
</script>

<style lang="less" scoped>
.account-management-container {
	.search-account {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
	}
	.add-btn {
		// width: 92px;
		height: 34px;
		background: #6384fe;
		border-radius: 4px;
		line-height: 3px;
		position: absolute;
		top: 44px;
		right: 20px;
		color: #fff;
	}
	.edit-btn {
		border-radius: 4px;
		color: #fff;
		background-color: #6384fe;
	}
	.delete-btn {
		border-radius: 4px;
		color: #fff;
		background-color: #ef5652;
	}
	.page {
		margin-top: 24px;
	}
}
</style>

<style lang="less">
.account-management-container .el-tabs__active-bar {
	background-color: #6384fe !important;
}
.account-management-container .el-tabs__item.is-active {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #6384fe !important;
}
.account-management-container .el-table thead {
	color: #676a6c;
	tr {
		th {
			background-color: #f8f8f9;
		}
	}
}
.account-management-container {
	.table {
		width: 80% !important;
		margin-top: 16px;
	}
}
</style>
